<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-button style="margin-bottom: 24px" type="primary" icon="plus" @click="handleEditModal"> 创建推广任务 </a-button>
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="8" :sm="24">
            <a-form-item label="品牌">
              <a-select v-model="queryParam.brandIds" placeholder="品牌">
                <a-select-option v-for="(item, index) in regionList" :key="index" :value="item.key"> {{ item.value }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="状态">
              <a-select v-model="queryParam.status" placeholder="状态">
                <a-select-option value="5"> 待投放 </a-select-option>
                <a-select-option value="2"> 未开始 </a-select-option>
                <a-select-option value="1"> 执行中 </a-select-option>
                <a-select-option value="4"> 已结束 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="类型">
              <a-select v-model="queryParam.taskAreas" placeholder="类型">
                <a-select-option value="1"> 总部任务 </a-select-option>
                <a-select-option value="2"> 大区任务 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="执行时间">
              <a-range-picker style="width: 100%" :show-time="{ format: 'YYYY-MM-DD HH:mm:ss' }" v-model="regTime" :placeholder="['开始时间', '结束时间']" @change="onChangeType" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="综合搜索">
              <a-input v-model="queryParam.searchParam" placeholder="请输入任务ID/名称/创建人" style="margin-left: 5px" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
              <a-button type="primary" @click="searchQuery">查询</a-button>
              <a-button @click="searchReset" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="pagination" :scroll="{ x: 1300 }">
      <span slot="action" slot-scope="text, record">
        <router-link :to="`/pos+/match/extension/information/${record.id}`">查看</router-link>
        <a-divider type="vertical" />
        <span v-if="record.status != '已结束'">
          <router-link :to="`/pos+/match/extension/detail/${record.id}`">编辑</router-link>
          <a-divider type="vertical" />
          <a-popconfirm title="确定结束任务吗？" @confirm="endTask(record.id)">
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a href="javascript:;">结束任务</a>
          </a-popconfirm>
        </span>
        <a-popconfirm title="确定删除吗？" @confirm="handleMatchDelete(record.id)" v-else>
          <a-icon slot="icon" type="question-circle-o" style="color: red" />
          <a href="javascript:;">删除</a>
        </a-popconfirm>
      </span>
    </s-table>
  </a-card>
</template>
<script>
import { STable } from '@/views/box/components'
import { taskList, taskDel, taskEdit } from '@/api/pos/extension'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id'
  },
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '类型',
    dataIndex: 'taskArea'
  },
  {
    title: '投放品牌',
    dataIndex: 'brands'
  },
  {
    title: '状态',
    dataIndex: 'status'
  },
  {
    title: '完成人数',
    dataIndex: 'finishCount'
  },
  {
    title: '创建人',
    dataIndex: 'publisherName'
  },

  {
    title: '操作',
    dataIndex: 'action',
    width: '200px',
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    STable
  },
  data() {
    return {
      columns,
      queryParam: {},
      condition: {},
      regionList: [
        {
          value: 'JNBY',
          key: '2738574294'
        },
        {
          value: '速写CROQUIS',
          key: '2504948039'
        },
        {
          value: 'Pomme de terre',
          key: '6924108367'
        },
        {
          value: 'LESS',
          key: '2822095692'
        },
        {
          value: 'jnby by JNBY',
          key: '4'
        },
        {
          value: 'JNBYHOME',
          key: '8348044436'
        },
        {
          value: '江南布衣+',
          key: '5'
        },

        {
          value: '江南布衣官方Outlet',
          key: '11'
        },

        {
          value: 'APN73',
          key: '15'
        }
      ],
      regTime: [],
      pagination: {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      loadData: parameter => {
        const queryParam = JSON.parse(JSON.stringify(this.queryParam))
        if (queryParam.brandIds) {
          queryParam.brandIds = [queryParam.brandIds]
        }
        if (queryParam.status) {
          queryParam.status = [queryParam.status]
        }
        if (queryParam.taskAreas) {
          queryParam.taskAreas = [queryParam.taskAreas]
        }

        const data = {
          ...queryParam,
          current: parameter.pageNo,
          size: parameter.pageSize
        }
        return taskList(data).then(res => {
          if (res.code === 200) {
            this.pagination.current = res.data.current
            const { records, total, size, current } = res.data
            const data = {
              page: {
                count: total,
                pageNo: current,
                pageSize: size,
                pages: Math.ceil(total / size)
              },
              data: records
            }

            return data
          } else {
            this.$message.error(res.msg || res.message)
            const data = {
              page: {
                pageNo: 0,
                count: 0,
                pageSize: 10
              },
              data: []
            }
            return data
          }
        })
      }
    }
  },
  methods: {
    //新增
    handleEditModal() {
      this.$router.push(`/pos+/match/extension/detail/${'add'}`)
    },
    endTask(id) {
      let data = {
        id: id,
        isStop: 'Y'
      }
      taskEdit(data).then(res => {
        if (res.code === 200) {
          this.$message.success('已结束')
          this.$refs.table.refresh(true)
        }
      })
    },
    // 删除
    handleMatchDelete(id) {
      let data = {
        id: id
      }
      taskDel(data).then(res => {
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.$refs.table.refresh(true)
        }
      })
    },
    searchQuery() {
      this.$refs.table.refresh(true)
    },
    searchReset() {
      this.queryParam = {}
      this.regTime = []
      this.$refs.table.refresh(true)
    },
    onChangeType(value, dateString) {
      this.queryParam.startDate = dateString[0]
      this.queryParam.endDate = dateString[1]
    }
  }
}
</script>
<style scoped lang="less">
</style>
